/**
 * Created by dr2009 on 2017/6/11 0011.
 */
import React, { Component } from 'react'

/**
 *
 * @param pointA
 * @param pointB
 * @param offset 结束点偏移单位
 * @returns {{start: [*,*], end: [*,*]}}
 */
const sortPoint = (pointA, pointB, offset = 0) => {
  return {
    start: [
      Math.min(pointA[0], pointB[0]),
      Math.min(pointA[1], pointB[1])
    ],
    end: [
      Math.max(pointA[0], pointB[0]) + offset,
      Math.max(pointA[1], pointB[1]) + offset
    ]
  }
}

/**
 * 生存两点间的所有点坐标
 * @param pointA
 * @param pointB
 * @returns {Array}
 */
const createPointList = (pointA, pointB) => {
  const {start, end} = sortPoint(pointA, pointB)
  let group = []
  for (let i = start[0]; i <= end[0]; i++) {
    for (let j = start[1]; j <= end[1]; j++) {
      group.push([i, j])
    }
  }
  return group
}

class MagicEdit extends Component {
  constructor (props) {
    super(props)
    this.state = {
      activeItem: [-1, -1],
      hoverItem: [-1, -1],
      hoverList: []
    }
  }

  render () {
    const {order, list} = this.props
    const {activeItem, hoverItem, hoverList} = this.state
    let group = createPointList([1, 1], [order, order])
    const isSelected = (item) => {
      return item[0] === activeItem[0] && item[1] === activeItem[1]
    }
    // todo: 是否可以根据范围确定是否hover,不生成所有坐标
    const isHover = (item) => {
      return hoverList.some(hoverItem => item[0] === hoverItem[0] && item[1] === hoverItem[1])
    }
    return (
      <div className={`container container-order-${order}`} style={{gridGap: 5}}>
        {
          group.map(item => (
            <div
              key={item}
              className={`add add${item[0]}-${item[1]} ${isSelected(item) ? 'selected' : ''} ${isHover(item) ? 'hover' : ''}`}
              onClick={(e) => this.clickItem(item)}
              onMouseEnter={(e) => this.hoverItem(item)}
            >
              +
            </div>
          ))
        }
        {
          list.map((item, index) => {
            const {start, end, linkUrl, imgUrl} = item
            return (
              <div key={index} className="item item-edit" style={{gridArea: start.concat(end).join('/')}}>
                <i className="btn-delete" onClick={(e) => this.removeItem(index)}>x</i>
              </div>
            )
          })
        }
      </div>
    )
  }

  clickItem = (item) => {
    const {activeItem} = this.state
    const {addItem} = this.props
    if (activeItem[0] + activeItem[1] > 0) { // 已经存在点击坐标
      if (this.isExistInArea(activeItem, item)) return
      this.setState({
        activeItem: [-1, -1],
        hoverItem: [-1, -1],
        hoverList: []
      })
      addItem(sortPoint(activeItem, item, 1))
    } else {
      this.setState({activeItem: item})
    }
  }

  hoverItem = (item) => {
    const {activeItem} = this.state
    if (activeItem[0] + activeItem[1] > 0) { // 已经存在点击坐标
      if (this.isExistInArea(activeItem, item)) return
      // 两点之间不存在已选区域
      this.setState({
        hoverList: createPointList(activeItem, item),
        hoverItem: item
      })
    } else {
      this.setState({hoverItem: item})
    }
  }

  /**
   * 判断两点之间是否存在已选区域
   * @param itemA
   * @param itemB
   */
  isExistInArea = (itemA, itemB) => {
    const {list} = this.props
    const hoverList = createPointList(itemA, itemB)

    return list.some(({start, end}) => {
      return hoverList.some(hoverItem => {
        const isInX = start[0] <= hoverItem[0] && hoverItem[0] < end[0]
        const isInY = start[1] <= hoverItem[1] && hoverItem[1] < end[1]
        return isInX && isInY
      })
    })
  }

  removeItem = (index) => {
    this.props.removeItem(index)
  }
}

export default MagicEdit
